<template>
  <div class="tw-libviewer">
    <el-tabs
      v-model="activeTab"
      type="border-card"
      @tab-click="handleTabClick">
      <el-tab-pane
        v-for="(item, idx) in files"
        :key="idx"
        :name="idx">
        <span slot="label">
          <i class="tw-ico"
          :class="['x24 xr'+item.type]"></i>
          <span>{{item.name}}</span>
        </span>

        <div class="tw-libviewer-body">
          <div v-if="item.type === 'image'" class="tw-libviewer-imgbox">
            <img :src="item.newUrl" />
          </div>

          <div v-else-if="item.type === 'pdf'" class="tw-libviewer-pdf">
            <lib-pdf :pdfUrl="item.pdfUrl"></lib-pdf>
          </div>

          <div v-else-if="['word', 'ppt', 'excel'].includes(item.type) && officeToPdfApiUrl" class="tw-libviewer-pdf">
            <iframe :src="item.pdfUrl"></iframe>
          </div>

          <div v-else class="tw-libviewer-download">
            <a class="tw-libviewer-link" :href="item.url" :download="item.name">{{downloadLinkText}}</a>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import extToFileType from '../tw-lib-base/extToFileType'
import pdf from '../tw-lib-pdf/index.vue'

export default {
  name: 'lib-viewer',

  mixins: [style],

  components: {
    libPdf: pdf
  },

  props,

  data() {
    return {
      activeTab: 0
    }
  },

  computed: {
    style () {
      return {
        contentMinHeight: this.contentMinHeight,
        downloadLinkColor: this.downloadLinkColor,
        downloadLinkFontSize: this.downloadLinkFontSize,
        tabItemColor: this.tabItemColor
      }
    },

    files () {
      let vm = this
      return this.apiFiles.map((item, idx) => {
        if (!/^(http|https)/.test(item.url)) {
          item.newUrl = (vm.fileBaseUrl || window.$twApp.fileBaseUrl) + item.url
        } else {
          item.newUrl = item.url
        }

        if (!item.name) {
          item.name = item.url.substring(item.url.lastIndexOf('/') + 1) || `文件${idx}`
        }

        if (!item.type) {
          item.type = extToFileType(item.url)
        }

        if (item.type === 'pdf') {
          item.pdfUrl = {
            url: item.newUrl
          }
        }

        if (['word', 'ppt', 'excel'].includes(item.type)) {
          item.pdfUrl = `${vm.officeToPdfApiUrl}?fileJson=${encodeURIComponent(JSON.stringify({
            srcFileURL: item.newUrl
          }))}`
        }

        return item
      })
    }
  },

  methods: {
    generatePdfUrl (url) {
      return `./lib/pdfjs/web/viewer.html?file=${encodeURIComponent(this.url)}`
    },

    setStyle () {
      let style = ''

      if (this.contentMinHeight) {
        style += `
          ::root.tw-libviewer .tw-libviewer-imgbox,
          ::root.tw-libviewer .tw-libviewer-pdf iframe,
          ::root.tw-libviewer .tw-libviewer-download {
            min-height: ${this.contentMinHeight};
          }
        `
      }

      if (this.tabItemColor) {
        style += `
          ::root.tw-libviewer .el-tabs--border-card>.el-tabs__header .el-tabs__item {
            color: ${this.tabItemColor};
          }
        `
      }

      if (this.downloadLinkFontSize) {
        style += `
          ::root.tw-libviewer .tw-libviewer-link {
            font-size: ${this.downloadLinkFontSize};
          }
        `
      }

      if (this.downloadLinkColor) {
        style += `
          ::root.tw-libviewer .tw-libviewer-link {
            color: ${this.downloadLinkColor};
          }
        `
      }

      this.addStyle(style)
    },

    handleTabClick (tab) {
      this.$emit('change', this.files[this.activeTab])
    }
  },

  created () {
    window.aaa = this
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
